<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:body>
    	<ui:composition template="/resources/template/layout.xhtml">
    		<ui:define name="contentLayout">
    			<p:spacer height="10" style="display:block" />
			<p:panelGrid columns="3" styleClass="panel-noborder">
				<p:selectOneMenu value="#{serviceHistFlowController.serviceID}" rendered="#{serviceHistFlowController.selectView}">
						<f:selectItem itemLabel="Select a service" itemValue="-1" />
						<f:selectItems value="#{serviceHistFlowController.services}" var="service"
							itemLabel="#{service.virtualServiceName} - #{service.virtualServiceCategory}" itemValue="#{service.serviceID}" />
						<p:ajax event="change" update=":form-layout:selLVL" listener="#{serviceHistFlowController.reloadLevels}" />
				</p:selectOneMenu>
		
				<p:outputPanel id="selLVL" layout="inline" >
					<p:panelGrid columns="2" styleClass="panel-noborder" >
						<p:selectOneMenu  value="#{serviceHistFlowController.selectedLVL}" rendered="#{serviceHistFlowController.selectView and not empty serviceHistFlowController.serviceLvl}" style="margin-left:5px" >
								<f:selectItem itemLabel="Select level" itemValue="-1" />
								<f:selectItems value="#{serviceHistFlowController.serviceLvl}" var="serviceLvl"
									itemLabel="#{serviceLvl}" itemValue="#{serviceLvl}" />
								<p:ajax event="change" update=":form-layout:flowTree" listener="#{serviceHistFlowController.reload}" />
						</p:selectOneMenu>
						
						<p:commandButton value="Clear" update=":form-layout:selLVL form-layout:flowTree" actionListener="#{serviceHistFlowController.clearHistory}" style="margin-left:5px" rendered="#{ not empty serviceHistFlowController.serviceLvl}" /> 
						
						<h:outputText value="The historical is empty"  style="margin-left:5px" rendered="#{ not empty serviceHistFlowController.serviceID and empty serviceHistFlowController.serviceLvl}" />
					</p:panelGrid>	
				</p:outputPanel>
			</p:panelGrid>	
				<p:spacer height="10" style="display:block" />    		
    			     			    			 
    			<p:mindmap id="flowTree" value="#{serviceHistFlowController.root}" style="width:100%;height:400px;border:1px solid black;" styleClass="mindMapfont">
        			<p:ajax event="select" listener="#{serviceHistFlowController.onNodeSelect}" />
   				</p:mindmap>
   				
  				<p:dialog widgetVar="details" header="Node Details" resizable="false" modal="true" showEffect="fade" hideEffect="fade">
        			<h:outputText id="output" value="#{serviceHistFlowController.selectedNode.data}" />
    			</p:dialog>
    		</ui:define>
    	</ui:composition>
    </h:body>
</html>